<h1 class="page-title">List of Farm <span class="fw-semi-bold">Jobs</span></h1>

<section class="content-block" widget>
  <header>
    <div>
      Filter: <input class="form-control form-control-dark" type="text" [(ngModel)]="filter_search"> 
      Status: <select class="form-control form-control-dark" [(ngModel)]="filter_status">
        <option value="all">All</option>
        <option value="ready">Ready</option>
        <option value="success">Success</option>
        <option value="failed">Failed</option>
        <option value="running">Running</option>
        <option value="waiting">Waiting</option>
      </select>
      Limit: <select class="form-control form-control-dark" [(ngModel)]="filter_limit">
        <option value="10">10</option>
        <option value="30">30</option>
        <option value="100">100</option>
        <option value="1000">1000</option>
      </select>
    </div>
  </header>
  <div class="content-block-body">

      <table class="table table-striped table-hover">
        <thead>
        <tr class="table-smallheader">
          <th>
            Id
          </th>
          <th>
            Class
          </th>
          <th class="no-sort hidden-sm-down">
            
          </th>
          <th class="no-sort hidden-sm-down">
            Assigned to
          </th>
          <th class="no-sort">
            Status
          </th>
          <th class="no-sort">
            Last Update
          </th>
        </tr>
        </thead>
        <tbody>

          <tr *ngFor="let farmjob of jobs_data; trackBy:trackByJobId" data-toggle="collapse" [attr.data-target]="'#job' + farmjob.id">
            <td>{{farmjob.id}}</td>
            <td style="vertical-align:top;">
              <div class="fw-semi-bold">
                <div style="display:inline-block;">
                  <job_label (onJobDetails)="displayJobDetails($event)" [minwidth]="'500px'" [show_link]="false" [job]="farmjob"></job_label>
                </div>
                <span class="pull-right"><small>{{farmjob.progress}}</small></span>
              </div>
              <div *ngIf="farmjob.ext_take_name"><small><a [routerLink]="['/app/pipeline/assets-by-project', farmjob.ext_take_prj_id]" fragment="take_{{farmjob.ext_take_id}}"><b>Take:</b> {{farmjob.ext_take_name}}</a></small></div>
              <div *ngIf="farmjob.ext_scan_assets_name"><small><a [routerLink]="['/app/pipeline/assets-by-project', farmjob.ext_scan_assets_prj_id]" fragment="scan_{{farmjob.ext_scan_assets_id}}"><b>Scan:</b> {{farmjob.ext_scan_assets_name}}</a></small></div>
              <div *ngIf="farmjob.ext_tracking_assets_name"><small><a [routerLink]="['/app/pipeline/assets-by-project', farmjob.ext_tracking_assets_prj_id]" fragment="track_{{farmjob.ext_tracking_assets_id}}"><b>Track:</b> {{farmjob.ext_tracking_assets_name}}</a></small></div>
            </td>
            <td>
                <div *ngIf="(farmjob.status=='success' || farmjob.status=='failed') && farmjob.end_time">
                    Finished: <b>{{farmjob.end_time | timeago}}</b><br>Duration: <b>{{farmjob.end_time | duration:farmjob.start_time}}</b>
                </div>
                <div *ngIf="farmjob.status=='running'">
                    Running for: <b>{{farmjob.start_time | duration}}</b> 
                </div>
                <div *ngIf="farmjob.status=='waiting'">
                    Waiting for: <b>{{farmjob.start_time | duration}}</b> 
                </div>
                <div *ngIf="farmjob.status=='ready'">
                    Created: {{farmjob.created | timeago}}
                </div>
            </td>
            <td>{{farmjob.node?.machine_name}}</td>
            <td class="width-150">
              <job_status [status]="farmjob.status"></job_status>
            </td>
            <td class="hidden-sm-down">
              <div>{{farmjob.modified | timeago}}</div>
            </td>
          </tr>

        </tbody>
      </table>

</div>
</section>

<job_infopanel [job_id]="selected_job_id" (onHideJobDetails)="selected_job_id=0"></job_infopanel>
